<dstore-center-title>
  <span title i18n>My comments</span>
  <button routerLink="/my/comments" routerLinkActive="active">
    <ng-container i18n>My comments</ng-container>
  </button>
  <button routerLink="/my/donates" routerLinkActive="active">
    <ng-container i18n>My donations</ng-container>
  </button>
</dstore-center-title>

<dstore-edit *ngIf="edit$ | async as comment" [comment]="comment" (close)="editClose($event)"></dstore-edit>

<div class="comment-list" dstoreResize (resize)="listHeight$.next($event.height)">
  <div class="comment" *ngFor="let comment of comments$ | async">
    <ng-container>
      <ng-container *ngIf="comment.soft as app; else emptyIconRef">
        <img class="icon" dstoreCover="icon" [src]="app.info.icon" [routerLink]="['/app', app.name]" />
      </ng-container>
      <ng-template #emptyIconRef>
        <img class="icon" dstoreCover="icon" dstoreCover="icon" />
      </ng-template>

      <div class="body">
        <div class="info-line">
          <div class="name">{{ comment?.soft?.info?.name || comment.appName }}</div>
          <div class="time">
            <span i18n>Comment Date:</span>
            {{ comment.createTime | date: 'yyyy.MM.dd' }}
          </div>
          <div class="version"><span i18n>Version:</span> {{ comment.version }}</div>
          <div class="removed">
            <span *ngIf="!comment.soft || !comment.soft.package" i18n>Removed</span>
          </div>
        </div>
        <div class="content-line">
          <span class="content">{{ comment.content }}</span>
          <a i18n (click)="edit$.next(comment)">Edit</a>
        </div>
      </div>
    </ng-container>
  </div>
</div>
<div class="paginatorContainer">
  <ng-container *ngIf="count$ | async as count">
    <app-paginator
      [count]="count"
      [pageIndex]="pageIndex$ | async"
      (pageIndexChange)="gotoPage($event)"
    ></app-paginator>
  </ng-container>
</div>
